<!DOCTYPE html>
<html>
<head>
  <title>Laevade pommitamine</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" type="text/css" href="css/laycode.css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.utilities.js"></script>
  <script type="text/javascript" src="js/jquery.tables.js"></script>
  <script type="text/javascript" src="js/jquery.bombships.js"></script>
  <script type="text/javascript">
    $(function( $ ){
      //Disable right click menu.
      $("#manguvaljad").on("contextmenu",function(e){return false;}); 
      $("#juhisedButton").click(function(){$("#juhised").loadPopup();});
      $("#popupBackground").click(function(){disablePopup();});
      var gameId = location.href.match(/playback=([0-9]+)/);
      if (gameId != null) {
        window.game = null;
        gameId = gameId[1];
        var history = JSON.parse(localStorage["game"+gameId]);
        playback(history, 600);
        return;
      }
      //playSound("battlestart.ogg");
      $.post("BattleServlet", {"action":"gameStatus"}, function(resp) {
        console.log("Gamestatus: "+resp);
        if (resp == "") {
          //redirect to main page if no game going on
          var loc = window.location.pathname;
          loc = loc.substr(0, loc.lastIndexOf("/")+ 1);
          window.location.replace(loc);
        }
        console.log($.parseJSON( resp ))
      });

      // When the DOM is ready, build the game.
      var game = new BattleShips($("#manguvaljad"), 10, 10);
      window.game = game;
      
      
      $("#alustaButton").click(function(){
        $("#mangusonum").statusPopup();
      });
    });
     
  </script> 
</head>

<body>
  <div id="popupBackground"></div>
  <div class="popup" id="mangusonum">
    <!--Here be dragons-->
  </div>
  <div class="popup" id="juhised">
    <h2>Juhised</h2>  
    <p>Paiguta 10 laeva paremale mänguväljale ja vajuta "Alusta"</p>
    <p>Laevade keerutamiseks kasuta keskmist või paremat ning laeva 
      ümber tõstmiseks vasakut hiireklahvi.</p>
    <p>Vastase laevu saad pommitada kui kõik laevad paigas ja mäng alustatud.</p>
    <p>Selleks tuleb klikkida vastase mänguväljal mõnele ruudule.</p>
    <p>Juhiste sulgemiseks vajuta väljaspoole seda akent.</p>
  </div>
  <div id="game">
        <img src="img/bg2t.png" width="1032" height="644" alt="Planets" usemap="#planetmap" />

        <map name="planetmap">
                <AREA SHAPE="rect" COORDS="230,31,429,99" href="#" id="juhisedButton">
                <AREA SHAPE="rect" COORDS="622,27,788,99" href="#" id="alustaButton">
        </map>

 <!-- <div> 
    <a href="#" class="GameButton" id="alustaButton">Alusta</a>
    <a href="#" class="GameButton" id="juhisedButton">Juhised</a>
  </div>-->
  <div id = "manguvaljad">

    <div class = "tabel" id = "firstTableDiv">
      <!--Esimene tabel tuleb siia-->
    </div>
    <div class = "tabel" id = "secondTableDiv">
      <!--Teine tabel tuleb siia-->
    </div>
  </div>
  </div>
</body>
</html>